<template>
  <div>
    <el-tabs type="border-card"
             v-model="chunkName">
      <el-tab-pane name="Login">
        <span slot="label"><i class="el-icon-date"></i>登录</span>
      </el-tab-pane>
      <el-tab-pane name="Register"
                   label="注册"> </el-tab-pane>
      <keep-alive>
        <!-- 这样使用组件的好处 -->
        <component v-bind:is="chunkName"
                   :userRules="userRules"
                   v-bind:chunkName.sync="chunkName"></component>
      </keep-alive>
    </el-tabs>
    <!-- 包含了登录和注册 -->
  </div>
</template>

<script>
import Login from "../components/login/index.vue";
import Register from "../components/register/index.vue";
import userRules from "../assets/userRulers.json";

export default {
  name: "User",
  components: { Login, Register },
  data () {
    return {
      chunkName: "Register",
      userRules,
    };
  },
};
</script>

<style></style>
